<template>
  <view>
    <view class="nav">
      <view>
        <text v-for="(item,index) in navList" :class="index===selectedIndex?'selected':''" :key='item.title' @tap='navItemClick(index)'>{{item.title}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        navList:[
          {title:'消息'},
          {title:'看过我'},
          {title:'新职位'},
          {title:'对我感兴趣'}
        ],
        selectedIndex: 0
      }
    },
    methods: {
      navItemClick(i) {
        this.selectedIndex=i
      }
    }
  }
</script>

<style lang="scss">
  .nav {
    width: 750rpx;
    height: 222rpx;
    background: $uni-color-primary;
    view {
      transform: translateY(150rpx);
      text {
        margin-left: 30rpx;
        // 38
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
        opacity: .6;
      }
      .selected {
        opacity:1;
        font-size: 42rpx;
      }
    }
  }
</style>
